<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>主题设置</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no"/>
    <meta name="renderer" content="webkit"/>
    <meta name="force-rendering" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <link rel="stylesheet" href="/static/admin/static/component/pear/css/pear.css" />
    <link href="/static/admin/static/css/main.css?v=#(version)" rel="stylesheet"/>
    <link href="/static/public/libs/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <style>
        .layui-input-block{
            margin-left: 130px;
        }
    </style>
</head>
<body class="pear-container">
<div class="p-container">
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form" action="">

                <div class="layui-form-item">
                    <label class="layui-form-label">网站所属人名称</label>
                    <div class="layui-input-block">
                        <input type="text" value="#option('PERFREE_WEB_NAME')" name="PERFREE_WEB_NAME" placeholder="网站右侧头像下边的名称" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">网站所属人头像</label>
                    <div class="layui-input-block">
                        <div class="p-upload-box" id="PERFREE_WEB_RIGHT_LOGO">
                            <input type="hidden" value="#option('PERFREE_WEB_RIGHT_LOGO')" name="PERFREE_WEB_RIGHT_LOGO">
                        </div>
                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">首页展示标题</label>
                    <div class="layui-input-block">
                        <input type="text" value="#option('DEFAULT_HERO_TITLE')" name="DEFAULT_HERO_TITLE" placeholder="请输入首页展示标题" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">首页展示副标题</label>
                    <div class="layui-input-block">
                        <input type="text" value="#option('DEFAULT_HERO_SUB_TITLE')" name="DEFAULT_HERO_SUB_TITLE" placeholder="请输入首页展示副标题" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label" style="width: 100px;text-align: left">首页背景方式</label>
                    <div class="layui-input-inline">
                        <select name="HOME_BANNER" lay-filter="homeBanner" style="width: 300px">
                            <option value="0" #(optionCompare('HOME_BANNER', '0') ? 'selected': '')>背景图</option>
                            <option value="1" #(optionCompare('HOME_BANNER', '1') ? 'selected': '')>外部图片资源</option>
                            <option value="2" #(optionCompare('HOME_BANNER', '2') ? 'selected': '')>自定义颜色</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item" id="bannerImg" #if(!optionCompare('HOME_BANNER', '0'))style="display: none;"#end >
                    <label class="layui-form-label">首页背景图</label>
                    <div class="layui-input-block">
                        <div class="p-upload-box" id="HOME_BANNER_IMG">
                            <input type="hidden" value="#option('HOME_BANNER_IMG')" name="HOME_BANNER_IMG">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item" id="bannerLinkImg" #if(!optionCompare('HOME_BANNER', '1'))style="display: none;"#end>
                    <label class="layui-form-label">首页背景图地址</label>
                    <div class="layui-input-block">
                        <input type="text" value="#option('HOME_BANNER_IMG_LINK')" name="HOME_BANNER_IMG_LINK" placeholder="首页背景图地址" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item" id="bannerColor" #if(!optionCompare('HOME_BANNER', '2'))style="display: none;"#end>
                    <label class="layui-form-label">首页背景颜色</label>
                    <div class="layui-input-block">
                        <input type="text" value="#option('HOME_BANNER_COLOR')" name="HOME_BANNER_COLOR" placeholder="请输入首页背景颜色,如#409eff" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">首页标题颜色</label>
                    <div class="layui-input-block">
                        <input type="text" value="#option('HOME_TITLE_COLOR')" name="HOME_TITLE_COLOR" placeholder="请输入首页标题颜色代码,如#409eff" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">首页副标题颜色</label>
                    <div class="layui-input-block">
                        <input type="text" value="#option('HOME_SUB_TITLE_COLOR')" name="HOME_SUB_TITLE_COLOR" placeholder="请输入首页副标题颜色代码,如#409eff" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">网站主题色</label>
                    <div class="layui-input-block">
                        <input type="text" value="#option('PERFREE_PRIMARY_COLOR')" name="PERFREE_PRIMARY_COLOR" placeholder="请输入网站主题色代码,如#409eff" autocomplete="off" class="layui-input">
                    </div>
                </div>


                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="optionForm">保存设置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="/static/public/libs/jquery/jquery-3.5.1.min.js"></script>
<script src="/static/public/libs/layui-v2.5.6/layui/layui.js"></script>
<script src="/static/admin/static/component/pear/pear.js"></script>
<script src="/static/public/js/main.js?v=#(version)"></script>
<script>
    let layer,form,toast;
    layui.use(['layer','form','toast'], function() {
        layer = layui.layer;
        form = layui.form;
        toast = layui.toast;
        form.on('select(homeBanner)', function (data) {
            if (data.value === "0" || data.value === 0) {
                $("#bannerImg").show();
                $("#bannerLinkImg").hide();
                $("#bannerColor").hide();
            }

            if (data.value === "1" || data.value === 1) {
                $("#bannerImg").hide();
                $("#bannerLinkImg").show();
                $("#bannerColor").hide();
            }

            if (data.value === "2" || data.value === 2) {
                $("#bannerImg").hide();
                $("#bannerLinkImg").hide();
                $("#bannerColor").show();
            }
        });

        form.on('submit(optionForm)', function(data){
            $.ajax({
                type: "POST",
                url: "/admin/setting/save",
                contentType:"application/json",
                data: JSON.stringify(data.field),
                success:function(d){
                    if (d.code === 200){
                        parent.toast.success({message: "保存成功",position: 'topCenter'});
                    } else {
                        parent.toast.error({message: d.msg,position: 'topCenter'});
                    }
                },
                error: function (data) {
                    parent.toast.error({message: "保存失败",position: 'topCenter'});
                }
            });
            return false;
        });
    });
</script>
</body>
</html>